<template>
	<view class="container gray_bg my_company">
    <view-state label="租客状态" :type="form.type_text" :state="form.status_text"></view-state>

    <tm-form @submit="confirm" ref="formRef" v-model="form" transprent :label-width="300" :border="false">
			<view class="form_title">基础信息</view>
			<tm-sheet :margin="[0, 20]" :round="3" :shadow="2">
				<tm-form-item label="租客类型" field="type_text">
<!--          <tm-tag text :shadow="0" color="red" size="m" :label="merchant_info.type_text"></tm-tag>-->
          <tm-tag text :shadow="0" color="#165DFF" size="m" :label="form.type_text"></tm-tag>
				</tm-form-item>

				<tm-form-item label="公司名称" field="company_name" :padding="[0, 0]">
          <view v-if="readonly" class="form_static_label">{{form.company_name}}</view>
					<tm-input v-else :inputPadding="[0, 0]" v-model.lazy="form.company_name" :transprent="true" :showBottomBotder="false"> </tm-input>

				</tm-form-item>
				<tm-form-item required label="租客名称" field="name" :rules="[{ required: true, message: '请输入租客名称' }]">
          <view v-if="readonly" class="form_static_label">{{form.name}}</view>
					<tm-input v-else :inputPadding="[0, 0]" v-model.lazy="form.name" :transprent="true" :showBottomBotder="false"> </tm-input>
				</tm-form-item>
				<tm-form-item label="所属行业" field="industry">
          <view v-if="readonly" class="form_static_label">{{form.industry_text}}</view>
          <view v-else @click="industryVisible = !industryVisible" class="flex flex-row flex-row-center-between">
            <tm-text :userInteractionEnabled="false" :label="form.industry_text || '请选择所属行业'"></tm-text>
            <tm-icon :userInteractionEnabled="false" :font-size="24" name="tmicon-angle-right"></tm-icon>
          </view>
          <tm-picker
              @confirm="selectIndustry"
              :columns="industryOptions"
              map-key="name"
              v-model:model-str="show.industryStr"
              v-model:show="industryVisible"
              :default-value="show.industryIndex"
              v-model="show.industryIndex"
          ></tm-picker>
				</tm-form-item>
			</tm-sheet>

			<view class="form_title">开票信息</view>
			<tm-sheet :margin="[0, 20]" :round="3" :shadow="2">
				<tm-form-item label="开户行" field="bank_name" >
          <view v-if="readonly" class="form_static_label">{{form.bank_name}}</view>
					<tm-input v-else :inputPadding="[0, 0]" v-model.lazy="form.bank_name" :transprent="true" :showBottomBotder="false"> </tm-input>
				</tm-form-item>
				<tm-form-item label="银行账号" field="bank_account">
          <view v-if="readonly" class="form_static_label">{{form.bank_account}}</view>
          <tm-input v-else :inputPadding="[0, 0]" v-model.lazy="form.bank_account" :transprent="true" :showBottomBotder="false"> </tm-input>
				</tm-form-item>
				<tm-form-item label="预留电话" field="reserve_phone">
          <view v-if="readonly" class="form_static_label">{{form.reserve_phone}}</view>
          <tm-input v-else :inputPadding="[0, 0]" v-model.lazy="form.reserve_phone" :transprent="true" :showBottomBotder="false"> </tm-input>
				</tm-form-item>
				<tm-form-item label="纳税人识别号" field="credit_code">
          <view v-if="readonly" class="form_static_label">{{form.credit_code}}</view>
          <tm-input v-else :inputPadding="[0, 0]" v-model.lazy="form.credit_code" :transprent="true" :showBottomBotder="false"> </tm-input>
				</tm-form-item>
				<tm-form-item label="默认发票类型" field="invoice_type">
          <view v-if="readonly" class="form_static_label">{{form.invoice_type_text}}</view>

			      <view v-else @click="showPicker = !showPicker" class="flex flex-row flex-row-center-between">
								<tm-text :userInteractionEnabled="false" :label="form.invoice_type_text || '请选择默认发票类型'"></tm-text>
								<tm-icon :userInteractionEnabled="false" :font-size="24" name="tmicon-angle-right"></tm-icon>
							</view>
							<tm-picker
                    @confirm="selectInvoiveType"
										:columns="invoiceOptions"
										v-model:model-str="show.pickerStr"
										v-model:show="showPicker"
										:default-value="show.pickerIndex"
										v-model="show.pickerIndex"
									></tm-picker>

					<!-- <tm-text @click="() => inoviceTypeVisible.value = true" :label="form.invoice_type || '请选择发票类型'"></tm-text> -->
				</tm-form-item>
				<tm-form-item label="开票地址" field="open_invoice_address">

          <view v-if="readonly" class="form_static_label">{{form.open_invoice_address}}</view>
          <tm-input v-else :inputPadding="[0, 0]" v-model.lazy="form.open_invoice_address" :transprent="true" :showBottomBotder="false"> </tm-input>
				</tm-form-item>
				<tm-form-item label="发票接收邮箱" field="invoice_receive_email">
          <view v-if="readonly" class="form_static_label email_label">
            <view>{{form.invoice_receive_email}}</view>
            <view @click="() => copyEmail(form.invoice_receive_email)">
              <tm-icon fontSize="32" name="iconfont icon-fuzhi" color="#165DFF"></tm-icon>
            </view>
          </view>
          <tm-input v-else :inputPadding="[0, 0]" v-model.lazy="form.invoice_receive_email" :transprent="true" :showBottomBotder="false"> </tm-input>
				</tm-form-item>
				<tm-form-item label="发票接收手机号" field="invoice_receive_phone">
          <view v-if="readonly" class="form_static_label">{{form.invoice_receive_phone}}</view>
          <tm-input v-else :inputPadding="[0, 0]" v-model.lazy="form.invoice_receive_phone" :transprent="true" :showBottomBotder="false"> </tm-input>
				</tm-form-item>
			</tm-sheet>
<!--      房源信息 -->
      <view v-if="readonly" class="house_info">
        <view class="house_info_title">
          <text>房源信息</text>
          <text class="house_info_num">(共{{houseList.length}}套)</text>
        </view>
        <tm-sheet :margin="[0, 20]" :round="3" :shadow="2">
          <view v-for="(item, i) in houseList" :key="i" class="house_item">
            <tm-form-item label="房源编号" field="room_number">
              <view class="form_static_label">{{item.room_number}}</view>
            </tm-form-item>
            <tm-form-item label="房源地址" field="address">
              <view class="form_static_label">{{item.address}}</view>
            </tm-form-item>
            <tm-form-item label="计租面积" field="rental_area">
              <view class="form_static_label">{{item.rental_area}}</view>
            </tm-form-item>
          </view>
        </tm-sheet>
      </view>
      <view class="cus_footer_btn">
        <tm-button v-if="readonly" block @click="readonly = false" label="编辑" round="25"></tm-button>
        <tm-button v-else block form-type="submit" label="提交" round="25"></tm-button>
      </view>
		</tm-form>

	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
  import {each} from 'lodash'
  import { getDictionary} from '@/api_request/api'
  import { invoiceTypeOptions, tenantStatus } from '@/utils/dictionary'
  import {handleSaveMerchantsInfo, getHousingResource, getMerchantInfo} from "@/api_request/api";
  import { storeToRefs } from 'pinia'
  import { useInfoStore } from '@/store/userInfo'
  import {matchDictionaryName} from "@/utils/utils";
  import tmPicker from '@/tmui/components/tm-picker/tm-picker.vue'


  const userStore = useInfoStore()
  const { userInfo } : any = storeToRefs(userStore)
  const merchant_id = ref(userInfo.value.merchant_id)
  // const merchant_id = ref(12)// 默认先写死 todo
  const formRef = ref<any>(null)

  const showPicker = ref(false)
  const pickerStr = ref('')
  const show = ref({
  	pickerIndex: [0],
  	pickerStr: '',
    industryIndex: [0],
    industryStr: ''
  })
  
  
  const invoice_type = ref('')
  

  const readonly = ref<boolean>(true)
	const form = ref<any>({
		company_name: '', // 公司名称
		name: '', // 租客名称
		industry: 1, // 行业
		bank_name: '', // 开户行
		bank_account: '', // 银行账号
		reserve_phone: '', // 预留电话
		credit_code: '', // 纳税人识别号
		invoice_type: '', // 发票类型
		open_invoice_address: '', // 发票接收邮箱
		invoice_receive_email: '', // 开票地址
		invoice_receive_phone: '', // 发票接收手机号
	})

	const industryVisible = ref<boolean>(false)
	const inoviceTypeVisible = ref<boolean>(false)
	//  行业类别
	const industryOptions = ref<any[]>([])
  const invoiceOptions = ref<any[]>(invoiceTypeOptions)
	const  selectIndustry = (val) => {
    const item = industryOptions.value[val[0]]
    form.value.industry_text = item.name
    form.value.industry = item.id
    show.industryIndex = val[0]

	}
	const selectInvoiveType = (val) => {
    const item = invoiceOptions.value[val[0]]
    form.value.invoice_type_text = item.text
    form.value.invoice_type = item.id
    show.pickerIndex = val[0]
  }

//   商户详情
const merchant_info = ref<any>({})
	const houseList = ref<any[]>([])
	const getHouseList = async () => {
    const {data} = await getHousingResource({
      merchant_id: merchant_id.value,
      page_num: 1,
      page_size: 200
    })
    each(data.list, (item) => {
      item.address = `${item.area}${item.floor}`
    })
    houseList.value = data.list
  }

  //房源字典
  const typeOptions = ref<any>([])

  const getInitData = async () => {
    getHouseList()
    getDictionary({id: 3}).then((res: any) => {
      typeOptions.value = res?.data?.list
    })
    getMerchantInfo({
      id: merchant_id.value
    }).then(async (res:any) => {
      const {data} = await getDictionary({id: 1})
      industryOptions.value = data.list
      const index = data.list?.findIndex(item => item.id === res.data?.industry)
      show.industryIndex = index === -1 ? [0]: [index]
      form.value = {
        ...res.data,
        status_text: matchDictionaryName(tenantStatus, res.data)
      }
    })
  }
  getInitData()

  const copyEmail = (val) => {
    uni.setClipboardData({
      data: val
    });
  }
  const confirm = async() => {
    const res= await formRef.value.validate()
    if(!res.isPass) return
  //   继续保存
    const params = {
      ...res.data,
      id: merchant_id.value
    }
    const {data, code, message} = await handleSaveMerchantsInfo(params)
    if( code === 200) {
      readonly.value = true
      uni.$showMsg('操作成功！')
    } else{
      uni.$showMsg(message)
    }
  }
</script>

<style lang="scss" scoped>
	.my_company{
    .form_title,.house_info_title{
      margin-top: 12px;
    }
    .form_static_label{
      font-size: $cus-font-size-12;
    }
    .email_label{
      display:flex;
      justify-content: space-between;
    }
    :deep(.py-12) {
      padding:0;
    }
    :deep(.flex.text-view){
      color: $cus-color-1!important;
    }
    .house_info{
      .house_info_num{
        font-size: $cus-font-size-12;
        color: $cus-color-1;
        padding-left: 4px;
      }
      .house_info_title{

      }
    }
	}
</style>
